<template>
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    :ellipsis="false"
  >
    <el-sub-menu index="1">
      <template #title>{{ userName }}</template>
      <el-menu-item index="1-1">个人中心</el-menu-item>
      <el-menu-item index="1-2">退出登陆</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { ref } from 'vue'
  import useStore from '@/store'
  const router = useRouter()
  const { useUserStore } = useStore()
  
  const { userName } = useUserStore

  let activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    switch (key) {
      case '1-2':
      useUserStore.Logout()
        router.push('/login')
    }
  }
</script>